{% extends 'customer_dashboard.html' %}

{% block content %}

<!-- ✅ axios 脚本引入，放顶部 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<div style="max-width: 420px; margin: 40px auto; padding: 30px; background: #f9faff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
  <h2 style="text-align: center; margin-bottom: 24px; color: #1a73e8;">忘记密码重置</h2>

{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <ul style="list-style:none; padding:0; margin-bottom: 20px; text-align:center;">
      {% for category, message in messages %}
        <li style="color: {{ 'red' if category == 'error' else 'green' }};
                   padding: 8px 12px; border-radius: 6px;
                   background-color: {{ 'rgba(255, 0, 0, 0.1)' if category == 'error' else 'rgba(0, 128, 0, 0.1)' }};
                   margin-bottom: 8px;">
          {{ message }}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
{% endwith %}


  <form method="post" style="display: flex; flex-direction: column; gap: 16px;">

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      选择银行卡号:
      <select name="cardID" required style="padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
        <option value="" disabled selected>请选择银行卡号</option>
        {% for card in user_cards %}
          <option value="{{ card.cardID }}" {% if request.form.cardID == card.cardID %}selected{% endif %}>
            {{ card.cardID }} （余额: {{ card.balance }} 元）
          </option>
        {% endfor %}
      </select>
    </label>

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      姓名:
      <input type="text" name="name" value="{{ request.form.name or '' }}" required style="padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
    </label>

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      身份证号:
      <input type="text" name="pid" value="{{ request.form.pid or '' }}" required style="padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
    </label>

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      手机号:
      <div style="display: flex; gap: 8px; margin-top: 6px;">
        <input type="text" name="phone" id="phone" value="{{ request.form.phone or '' }}" required style="flex: 1; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
        <button type="button" onclick="sendCode()" style="padding: 10px 16px; background-color: #1a73e8; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">发送验证码</button>
      </div>
    </label>

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      验证码:
      <input type="text" name="code" value="{{ request.form.code or '' }}" required style="padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
    </label>

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      新密码:
      <input type="password" name="new_password" required style="padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
    </label>

    <label style="display: flex; flex-direction: column; font-weight: 600; color: #333;">
      确认密码:
      <input type="password" name="confirm_password" required style="padding: 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px;">
    </label>

    <button type="submit" style="padding: 14px; background-color: #1a73e8; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer;">
      确认密码
    </button>
  </form>
</div>

<!-- ✅ 修复后的验证码发送逻辑 -->
<script>
  function sendCode() {
  const cardID = document.querySelector('select[name="cardID"]').value;
  const name = document.querySelector('input[name="name"]').value.trim();
  const pid = document.querySelector('input[name="pid"]').value.trim();
  const phone = document.querySelector('input[name="phone"]').value.trim();

  if (!cardID) {
    alert('请选择银行卡号');
    return;
  }
  if (!name || !pid || !phone) {
    alert('姓名、身份证号和手机号不能为空');
    return;
  }

  const button = event.target;
  button.disabled = true;
  button.textContent = '发送中...';

  axios.post('/customer/send_verification_code', {
    cardID, name, pid, phone
  }, {
    headers: { 'Content-Type': 'application/json' }
  })
  .then(res => {
    if (res.data.success) {
      alert(`验证码为：${res.data.code}\n请在${res.data.expire_seconds / 60}分钟内使用`);

      // 倒计时 60 秒后恢复按钮
      let countdown = 60;
      const interval = setInterval(() => {
        button.textContent = `${countdown} 秒后可重发`;
        countdown--;
        if (countdown < 0) {
          clearInterval(interval);
          button.disabled = false;
          button.textContent = '发送验证码';
        }
      }, 1000);

    } else {
      alert('发送失败：' + res.data.message);
      button.disabled = false;
      button.textContent = '发送验证码';
    }
  })
  .catch(err => {
    alert('发送验证码失败，请稍后重试');
    button.disabled = false;
    button.textContent = '发送验证码';
    console.error(err);
  });
}


</script>

{% endblock %}
